<template>
  <div class="app-container">
    <span style="font-size: 8px;color: #99a9bf">（默认密码：123456）</span>
    <Table
      :columns="columns"
      :page-function="page"
      :save-all-function="saveAll"
      ref="table"
    >
    </Table>
    <el-dialog :visible="assignDialog" @close="closeAssignDialog">
      <el-tree
        ref="roleTree"
        :data="roles"
        show-checkbox
        default-expand-all
        node-key="id"
        highlight-current
        :props="roleProps">
      </el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeAssignDialog">取 消</el-button>
        <el-button type="primary" @click="saveAssign">提 交</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible="passwordDialog" @close="closePasswordDialog">
      <el-form>
        <el-form-item :label="'新密码'">
          <el-input v-model="newPassword"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closePasswordDialog">取 消</el-button>
        <el-button type="primary" @click="savePassword">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { list, save, page } from '@/api/user/index'
import { list as listRole } from '@/api/role/index'
import Dialog from '@/components/Dialog/index'
import Table from '@/components/Table/index'
import { commonList, commonPage } from '@/utils/common'
export default {
  name: 'User',
  components: { Table, Dialog },
  data() {
    return {
      saveAll: save,
      page:page,
      assignDialog: false,
      saveDialog: false,
      passwordDialog: false,
      newPassword: '',
      row: {},
      roles: [],
      roleProps: {
        label: 'name'
      },
      columns: [
        {
          prop: 'id',
          label: '序号',
          width: '80',
          form: {
            key: 'id',
            label: 'id',
          },
        },
        {
          prop: 'name',
          label: '名称',
          width: '180',
          form: {
            key: 'name',
            label: '名称',
            type: 'input'
          }
        },
        {
          prop: 'username',
          label: '用户名',
          width: '180',
          form: {
            key: 'username',
            label: '用户名',
            type: 'input'
          }
        },
        {
          prop: 'email',
          label: '邮箱',
          width: '180',
          form: {
            key: 'email',
            label: '邮箱',
            type: 'input'
          }
        },
        {
          prop: 'address',
          label: '地址',
          width: '180',
          form: {
            key: 'address',
            label: '地址',
            type: 'input',
          }
        },
        {
          form: {
            key:'roles'
          }
        },
        {
          form: {
            key: 'avatar'
          }
        },
        {
          prop: 'updateTime',
          label: '更新时间',
          width: '200px'
        },
        {
          label: '操作',
          type: 'action',
          buttons: [
            {
              name: '分配',
              size: 'small',
              click: (row) => {
                this.showAssignDialog(row)
              }
            },
            {
              name: '重置密码',
              size: 'small',
              click: (row) => {
                this.showPasswordDialog(row)
              }
            }
          ]
        }
      ]
    }
  },
  watch: {
    row(v) {
      this.$nextTick(() => {
        if (this.$refs.roleTree !== undefined) {
          this.$refs.roleTree.setCheckedNodes(v.roles)
        }
      })
    }
  },
  beforeMount() {
    this.listRole()
  },
  methods: {
    savePassword() {
      this.row.password = this.newPassword
      this.$refs.table.saveAll(this.row)
      this.closePasswordDialog()
    },
    showPasswordDialog(row) {
      this.passwordDialog = true
      this.row = row
    },
    closePasswordDialog() {
      this.passwordDialog = false
      this.newPassword = ''
    },
    showAssignDialog(row) {
      this.assignDialog = true
      this.row = row
    },
    closeAssignDialog() {
      this.assignDialog = false
    },
    saveAssign() {
      this.row.roles = this.$refs.roleTree.getCheckedNodes()
      this.$refs.table.saveAll(this.row)
      this.closeAssignDialog()
    },
   listRole() {
    commonList(this.roles,listRole)
    },
    resetForm(row) {
      if (row === undefined) {
        row = {
          id: '',
          name: '',
          username: '',
          email: '',
          roles:[]
        }
      }
      this.form = [
        {
          key: 'id',
          label: 'id',
          value: row.id,
          type: 'input',
          readonly: true
        },
        {
          key: 'name',
          label: '名称',
          value: row.name,
          type: 'input'
        },
        {
          key: 'username',
          label: '用户名',
          value: row.username,
          type: 'input'
        },
        {
          key: 'email',
          label: '邮箱',
          value: row.email,
          type: 'input'
        },
        {
          key: 'roles',
          label:'角色',
          value: row.roles,
          readonly: true,
          type: 'input'
        },
        {
          key: 'avatar',
          label:'头像',
          value: row.avatar,
          readonly: true,
          type: 'input'
        }
      ]
    }
  }
}
</script>

<style scoped>

</style>
